<template>
  <div class="layout" id="lightStation">
    <!-- 点亮场站页面入口 2018/2/25 10:34 zhangQ -->
    <router-view :style="{minHeight: (layoutHeight+30)+'px'}"></router-view>
  </div>
</template>
<script>
  import hw from '@components/common/heightAndWidth'
  import {mapGetters} from 'vuex'

  export default {
    name: 'index',
    data () {
      let layIMShow = false
      let layimConfig = {}
      let layoutHeight = 600
      let isCollapsed = false
      let breadcrumbArray = []
      let datas = {layoutHeight, isCollapsed, breadcrumbArray, layIMShow, layimConfig}
      return datas
    },
    methods: {
      /**
       * TODO(退出登录)
       * @auther zhangQ
       * @date 2018/3/12 18:36
       **/
      logout () {
        this.$store.dispatch('logout').then(() => {
          this.$router.push({path: '/'})
        }).catch(err => {
          this.$message.error(err)
        })
      },
      goHome () {
        this.$router.push({path: '/'})
      },
      goUserCenter () {
        this.$router.push({path: '/back_end/user_center'})
      },
      horizontalSelect (name) {
        return name
      }
    },
    watch: {},
    mounted () {
      hw.setFullHeightAllWith('firstLayout', 2, (height) => {
        this.layoutHeight = height
      })
    },
    computed: {
      ...mapGetters(['currentUser']),
      rotateIcon () {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ]
      }
    },
    components: {}
  }
</script>
<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    /*width: 140px;*/
    /*height: 30px;*/
    /*background: #ffffff;*/
    float: left;
    position: relative;
    display: inline-block;
    width: 200px;
    height: 55px;
    /*left: 20px;*/
    padding: .5rem 1rem;
    margin-right: 0;
    background-image: url('../../assets/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 150px auto;
    background-color: #495060;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }

  .menu-icon {
    color: #ffffff;
    transition: all .3s;
  }

  .rotate-icon {
    transform: rotate(-90deg);
  }

  .badge-chatboxes {
    float: right;
    margin: 15px 15px 0;
    color: #ffffff;
  }

</style>
